<template>
  <div v-loading="loading" class="Fxpg_details" element-loading-background="rgba(0, 0, 0, 0.4)">
    <div class="Fxpg_cur listTablesOther">
      <div class="RightCardTitle ">保护对象风险</div>
      <div class="tabel_common tabel_commons">
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th"> 名称 </div>
              <div class="th"> 所属乡镇 </div>
              <div class="th"> 影响房屋 </div>
              <div class="th"> 影响人数 </div>
              <div class="th"> 淹没水深 </div>
            </div>
          </div>
          <el-scrollbar style="height:18vh; width: 100%;" class="el_scrollbar">
            <div class="tbody">
              <template v-if="!villagelst || villagelst.length <= 0">
                <div slot="no-results" class="noData" style="background-position: center 54%;padding-top: 32%;">暂无数据</div>
              </template>
              <div v-if="villagelst && villagelst.length > 0" class="tr" v-for="dict in villagelst" :key="dict.ewName"
                @click="rowHandleclickBh(dict)" :class="['tr', PionId == dict.ewCode ? 'ta' : '']">
                <div class="td"> 
                  <el-tooltip class="item" effect="dark" :content="dict.ewName" placement="top-start">
                    <span>{{ dict.ewName }}</span>
                  </el-tooltip> 
                  </div>
                <div class="td"> {{ dict.townAdnm }} </div>
                <div class="td"> {{ dict.house }} </div>
                <div class="td"> {{ dict.pCount }} </div>
                <div class="td">
                  <div class="img" v-show="dict.level == '1'">
                    <img src="@/assets/newimg/2m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '2'">
                    <img src="@/assets/newimg/1-2m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '3'">
                    <img src="@/assets/newimg/0.5-1m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '4'">
                    <img src="@/assets/newimg/0.5m.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>


    <div class="Fxpg_cur listTablesOther">
      <!-- <div class="RightCardTitle">基础设施风险 {{ playerTime }} </div> -->
      <div class="RightCardTitle"> 基础设施风险 </div>
      <div class="tabel_common tabel_commons">
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th"> 名称 </div>
              <div class="th"> 所属乡镇 </div>
              <div class="th"> 影响房屋 </div>
              <div class="th"> 影响人数 </div>
              <div class="th"> 淹没水深 </div>
            </div>
          </div>
          <el-scrollbar style="height:18vh; width: 100%;" class="el_scrollbar">
            <div class="tbody">
              <template v-if="!infrastructurelst || infrastructurelst.length <= 0">
                <div slot="no-results" class="noData" style="background-position: center 54%;padding-top: 32%;">暂无数据</div>
              </template>
              <div v-if="infrastructurelst && infrastructurelst.length > 0" class="tr" v-for="dict in infrastructurelst"
                :key="dict.ewName" @click="rowHandleclickBh1(dict)" :class="['tr', PionId == dict.ewCode ? 'ta' : '']">
                <div class="td"> 
                  <el-tooltip class="item" effect="dark" :content="dict.ewName" placement="top-start">
                    <span>{{ dict.ewName }}</span>
                  </el-tooltip> 
                </div>
                <div class="td"> {{ dict.townAdnm }} </div>
                <div class="td"> {{ dict.house }} </div>
                <div class="td"> {{ dict.pCount }} </div>
                <div class="td">
                  <div class="img" v-show="dict.level == '1'">
                    <img src="@/assets/newimg/2m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '2'">
                    <img src="@/assets/newimg/1-2m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '3'">
                    <img src="@/assets/newimg/0.5-1m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '4'">
                    <img src="@/assets/newimg/0.5m.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- <div class="Submerge riskInfo"> -->
    <div class=" riskInfo">
      <div class="riskInfo_item">
        <div></div>
        <div class="inner">
          <div class="num">{{ drownArea || 0 }}</div>
          <div>淹没面积(km²)</div>
        </div>
      </div>
      <div class="riskInfo_item">
        <div></div>
        <div class="inner">
          <div class="num">{{ sumVillage || 0 }}</div>
          <div>影响村庄(个)</div>
        </div>
      </div>
      <div class="riskInfo_item">
        <div></div>
        <div class="inner">
          <div class="num">{{ sumHouse || 0 }}</div>
          <div>影响户数(户)</div>
        </div>
      </div>
      <div class="riskInfo_item">
        <div></div>
        <div class="inner">
          <div class="num">{{ sumPCount || 0 }}</div>
          <div>影响人口数(人)</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { GetRiskDrowningDetail } from '../../../api/xuna.js'
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
export default {
  data() {
    return {
      idParams: '',
      fxpgList: {},
      loading: false,
      PionId: undefined,//选中的行

      timeList: [],
      currTime: '',
      villagelst: [],
      infrastructurelst: [],
      drownArea: 0,
      sumVillage: 0,
      sumHouse: 0,
      sumPCount: 0,

    }
  },
  computed: {
    basin() {
      return this.$store.getters.basin
    },
    playerTime() {
      return this.$store.getters.playerTime
    },
  },
  watch: {
    playerTime: {
      handler: function (index) {
        this.compareFlooding();
      }
    },
  },

  beforeDestroy() {
    this.$eventBus.$off('schemeFxId')
  },
  created() {
    var _this = this;
    this.$eventBus.$on('schemeFxId', res => {
      this.idParams = res
      this.getSelassessment()
    })
    window.UE_PreviewUpdate = function (res) {
      var times = res.time;
      _this.$store.dispatch('playerTime', times);
      _this.compareFlooding();
    }
  },
  mounted() {

  },
  methods: {
    // 保护对象点击行事件
    rowHandleclickBh(row) {
      this.PionId = row.ewCode
      var param = {
        "basin": this.basin,
        "eventName": "RehearsalPosition",  // 事件名称
        "ewCode": row.ewCode    // 预演编号
      }
      callUIInteraction("Web_RehearsalPosition", param);
      const dlgParams = this.$store.getters.dlgParams
      dlgParams.name = 'transferList'
      dlgParams.params = { ID: this.idParams, ewCode: row.ewCode }
      this.$store.dispatch('dlgParams', dlgParams)
      this.$eventBus.$emit('flyToYYFXD', row.ewCode)
    },
    rowHandleclickBh1(row) {
      this.PionId = row.ewCode
      var param = {
        "basin": this.basin,
        "eventName": "RehearsalPosition",  // 事件名称
        "ewCode": row.ewCode    // 预演编号
      }
      callUIInteraction("Web_RehearsalPosition", param);
    },
    //
    getSelassessment() {
      this.loading = true
      GetRiskDrowningDetail({ id: this.idParams }).then((res) => {
        this.loading = false
        if (res.isSuccess && res.data.length > 0) {
          console.log('fxpgList111', res.data);
          this.fxpgList = res.data
        } else {
          this.fxpgList = []
        }
      })
    },
    //时间轴变化
    compareFlooding() {
      var _this = this;
      console.log(this.playerTime);
      var stdt = new Date(this.playerTime);
      var fxpgList = this.fxpgList;
      var sassList = []
      for (let index = 0; index < fxpgList.length; index++) {
        const element = fxpgList[index];
        var etdt = new Date((element.key).replace("-", "/"));
        if (etdt == stdt || etdt < stdt) {
          sassList.push(element)
        }
      }
      var villagelst = [];
      var infrastructurelst = [];
      this.drownArea = 0;//淹没面积
      this.sumVillage = 0;//影响村庄
      this.sumHouse = 0;//影响户数
      this.sumPCount = 0;//影响人口数
      if (sassList.length > 0) {
        var _sassList = sassList[sassList.length - 1].value;
        _sassList.forEach(element => {
          _this.drownArea = _this.drownArea + element.area;
          _this.sumVillage = _this.sumVillage + element.village;
          _this.sumHouse = _this.sumHouse + element.house;
          _this.sumPCount = _this.sumPCount + element.pCount;
          if (element.type == 1) {
            villagelst.push(element)
          } else {
            infrastructurelst.push(element)
          }
        });
        this.villagelst = villagelst;
        this.infrastructurelst = infrastructurelst;
      } else {
        this.drownArea = 0;
        this.sumVillage = 0;
        this.sumHouse = 0;
        this.sumPCount = 0;
        this.villagelst = [];
        this.infrastructurelst = [];
      }

      console.log(sassList);
    },
  }
}
</script>
<style lang="less" scoped>
.Fxpg_details {
  display: flex;
  flex-direction: column;
  height: 100%;

  .Fxpg_cur {
    //height: 40%;
    height: 38%;
    flex-shrink: 0;
    background: rgba(3, 34, 55, 0.39);

    .tableFXPg {
      height: calc(100% - 40px);
    }
  }
}

.Submerge {
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  margin-top: 10px;

  >div {
    width: 25%;

    span {
      font-weight: bold;
      font-size: 22px;
      display: block;
      width: 100%;
      height: 80px;
      line-height: 60px;
      text-shadow: 0px 0px 9px rgba(188, 248, 255, 0.79);
      background: url("~@/assets/newimg/StatisticsBg.png") no-repeat top center;
      background-size: 90% 100%;
    }
  }
}

.riskInfo {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #3F72AA;
  padding: 20px 4px 10px;

  .riskInfo_item {
    width: 50%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFEFE;
  }

  .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    .num {
      font-size: 24px;
      font-family: DIN;
      font-weight: bold;
      color: #00FFFF;
    }
  }

  .riskInfo_item div:nth-child(1) {
    width: 50px;
  }

  .riskInfo_item:nth-child(1) {
    background: url('~@/assets/newimg/4.png') no-repeat;
    background-size: 90%;
  }

  .riskInfo_item:nth-child(2) {
    background: url('~@/assets/newimg/5.png') no-repeat;
    background-size: 90%;
  }

  .riskInfo_item:nth-child(3) {
    background: url('~@/assets/newimg/6.png') no-repeat;
    background-size: 90%;
  }

  .riskInfo_item:nth-child(4) {
    background: url('~@/assets/newimg/7.png') no-repeat;
    background-size: 90%;
  }
}

.helin40 {
  height: 40px;
  line-height: 40px;
  color: #fff;
}

.wid45 {
  width: 50px;
  padding: 0px 3px;
}

.RightCardTitle {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
}

.el-table .el-table__header-wrapper {
  margin-bottom: 5px;
}
</style>
